<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="资费策略" width="70%">
    <div class="app-container">
      <div class="app-head">
        <el-form>
          <el-row type="flex" justify="start">
            <el-col :span="7">
              <el-form-item label="策略编号" label-width="80px">
                <el-input v-model="tariffId" style="width:90%" size="mini" />
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="策略名称" label-width="80px">
                <el-input v-model="name" style="width:90%" size="mini" />
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="自动续订" label-width="100px">
                <el-select v-model="isGoon" style="width:90%" size="mini" placeholder="请选择">
                  <el-option value="" label="全部" />
                  <el-option value="0" label="是" />
                  <el-option value="1" label="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="flexd">
              <el-button
                size="mini"
                round
                type="primary"
                icon="el-icon-search"
                @click="loadList"
              >查询</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="计费渠道" label-width="80px">
                <el-select v-model="payType" style="width:90%" size="mini" placeholder="请选择">
                  <el-option v-for="item in pay" :key="item.billingChannelId" :value="item.billingChannelId" :label="item.billingChannelName" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="计费周期" label-width="80px">
                <el-input v-model="cycle" style="width:90%" size="mini" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="是否关联节目" label-width="100px">
                <el-select v-model="connect" style="width:90%" size="mini" placeholder="请选择">
                  <el-option value="" label="全部" />
                  <el-option value="0" label="未关联" />
                  <el-option value="1" label="已关联" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="7">
              <el-form-item label="产品价格" label-width="100px">
                <el-input v-model="price" style="width:90%" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="2" class="flexd">
              <el-button
                size="mini"
                round
                plain
                icon="el-icon-refresh"
                @click="reset"
              >
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-table">
        <el-table
          ref="multipleTable"
          :data="list"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column> -->
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectInit"
          />
          <el-table-column label="策略编号">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.tariffId" :content="scope.row.tariffId" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.tariffId }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="资费策略名称">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.price" :content="scope.row.price" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.price }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="计费周期">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.cycle" :content="scope.row.cycle" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.cycle }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="计费渠道">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.billingChannelName" :content="scope.row.billingChannelName" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.billingChannelName }}</span>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="是否自动续订">
            <template slot-scope="scope">
              {{ scope.row.isGoon }}
            </template>
          </el-table-column>

          <el-table-column label="退订锁定期">
            <template slot-scope="scope">
              {{ scope.row.lockPeriod }}
            </template>
          </el-table-column>

          <el-table-column label="计费方式">
            <template slot-scope="scope">
              {{ scope.row.mode }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <div class="btnArrs">
          <el-button
            type="primary"
            size="small"
            plain
            round
            @click="check"
          >取消</el-button>
          <el-button
            type="primary"
            size="small"
            round
            @click="connectList"
          >确认关联</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { productExpnse, payListSelect } from '@/api/product.js'
export default {
  props: {
    addpayList: {
      type: Boolean,
      default: false
    },
    payHas: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPointDialog: false,
      middleVal: [], // 中间值
      isGoon: '',
      arr: [], // 多选
      list: [], // 请求列表
      tariffId: '', // 策略编号
      name: '', // 策略名称
      flag: true,
      price: '', // 价格
      cycle: '', // 计费周期
      payType: '', // 支付渠道
      pay: [], // 支付渠道下拉
      connect: '', // 关联节目下拉
      associatedProgram: '', // 是否关联产品
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: 0, // 策略id
      count: 0, // 总数量
      addDialog: false, // 新增遮罩
      paySelect: [],
      arrPay: []
    }
  },
  watch: {
    addpayList(newVal) {
      if (newVal) {
        this.showPointDialog = newVal
        this.arrPay = this.payHas
        if (this.arrPay.length > 0) {
          this.middleVal = this.arrPay.map(item => {
            return item.tariffId
          })
        }
        this.loadList(this.payHas)
        this.getSelect()
      }
    }
  },
  methods: {
    // 设置选中状态
    toggleSelection() {
      if (this.arrPay) {
        for (let i = 0; i < this.arrPay.length; i++) {
          for (let j = 0; j < this.list.length; j++) {
            if (this.arrPay[i].tariffId === this.list[j].tariffId) {
              this.$refs.multipleTable.toggleRowSelection(this.list[j], true)
            }
          }
        }
      }
    },
    connectList() {
      this.middleVal.forEach(item => {
        this.arr.forEach((num, index) => {
          if (num.tariffId === item) {
            this.arr.splice(index, 1)
          }
        })
      })
      console.log(this.arr)
      this.check(this.arr)
    },
    selectInit(row, index) {
      if (this.arrPay.length > 0) {
        var arr = this.arrPay.map(item => {
          return item.tariffId
        })
        if (arr.indexOf(row.tariffId) > -1) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    // 多选
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.arr = val
      }
    },
    check(val) {
      this.showPointDialog = false
      this.$emit('closePay', val)
      this.reset()
    },
    // 请求列表
    loadList(payHas) {
      this.pageid = 1
      const request = {
        tariffId: this.tariffId, // 策略编号
        billingChannelId: this.payType,
        isGoon: this.isGoon,
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        // associatedProgram: this.associatedProgram, // 是否关联产品
        pageid: 1, // 当前页数
        pagecount: 20 // 每页可显示条数
      }
      productExpnse(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.count) // 总数量
          /* if (this.list.length > 0) {
            this.pageid = parseInt(res.data.list[0].pageid) // 当前页数
          } */
          this.status = true
          this.$nextTick(() => {
            this.toggleSelection()
          })
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },

    reset() {
      this.tariffId = ''
      this.name = ''
      this.price = ''
      this.cycle = ''
      this.isGoon = ''
      this.payType = ''
    },
    // 请求支付渠道下拉
    getSelect() {
      payListSelect({}).then(res => {
        this.pay = res.data.list
      })
    },

    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        tariffId: this.tariffId, // 策略编号
        billingChannelId: this.payType,
        isGoon: this.isGoon,
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      productExpnse(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      console.log(num)
      this.pageid = num // 当前页数
      const request = {
        tariffId: this.tariffId, // 策略编号
        billingChannelId: this.payType,
        isGoon: this.isGoon,
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      productExpnse(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
.btnArrs{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: -58px;
}
.app-table{
  position: relative;
}
</style>
